<template>
    <div class="one">
        <!-- <div v-for="(item, index) in shortmoves" :key="index" class="box">
            <video class="mooov" :src='`http://v.ixook.com/HD/${item.uuid}.mp4`' controls muted aotoplay></video>
            <section></section>
        </div> -->

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="20">
            <div v-for="(item, index) in shortmoves" :key="index" class="box">
                <video class="mooov" :src='`http://v.ixook.com/HD/${item.uuid}.mp4`' controls muted aotoplay></video>
                <section></section>
            </div>
        </van-list>

    </div>
</template>

<script>
import { getmove } from '../../api/all/index'
export default {
    data() {
        return {
            shortmoves: [],
            loading: false,
            finished: false,
            page: 1,

        }
    },
    created() {

    },
    methods: {
        onLoad() {
            console.log('11');
            // this.page++;
            getmove({ page: this.page, per_page: 10 }).then(res => {
                // console.log(res);
                this.shortmoves = [...this.shortmoves, ...res.data.data]
                this.loading = false
                if (this.page >= 3) {
                    this.finished = true
                } else {
                    this.page++
                }

                console.log(this.shortmoves);
            })
        }
    }

}
</script>
<style scoped lang="scss">
.one {
    background-color: #fff;
}

.box {
    width: 355px;
    // height: 200px;

    .mooov {
        width: 100%;
        height: 201px;
    }

    section {
        width: 355px;
        background-color: #fff;
        height: 44px;
    }
}
</style>